<template>
    <div class="chat">
        <div class="chat-sidebar">
            <el-menu
                    @select="handleSelectUser"
                    :default-active="activeIndex"
                    background-color="#515a6e"
                    text-color="#dddddd"
                    active-text-color="#ffffff">
                <template v-for="user in userTable">
                    <el-menu-item :index="user.ukId" :key="user.ukId">
                        {{user.username}}
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="chat-detailed">
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="message.content">
            </el-input>
            <el-button @click="sendMessage">默认按钮</el-button>
            <p></p>
            <el-backtop target=".el-table__body-wrapper" :visibility-height="10">
                <i style="color: #2d8cf0" class="el-icon-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>
    import MenuUtil from "../../utils/MenuUtil";
    import {mapDict} from "../../api/manage/dict";
    import DictUtils from "../../utils/DictUtils";
    import {sendMessage} from "../../api/chat/chat";
    import {listUser} from "../../api/manage/user";

    export default {
        name: "Chat",
        components: {},
        data() {
            return {
                activeIndex: "",
                userTable: [],
                menuList: [],
                message: {
                    toUser: "",
                    content: ""
                },
                receive: ""
            }
        },
        methods: {
            register() {
                let eventSource = new EventSource("http://localhost:8901/api/manage/sse/register", {withCredentials: true})
                eventSource.addEventListener('message', function (e) {
                    console.log(e)
                    console.log(e.data)
                    let parse = JSON.parse(e.data);
                    this.receive = parse
                })
            },
            sendMessage() {
                sendMessage(this.message).then(response => {

                    console.log(response.code)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSelectUser(index) {
                this.activeIndex = index
                this.message.toUser = index
            },
            listUser() {
                listUser(this.searchForm, 1, 300).then(result => {
                    this.userTable = result.data.users.records
                }).catch(error => {
                    console.log(error)
                })
            },
            mapDict() {
                mapDict().then(result => {
                    DictUtils.setDict(this, "chat", result.data.dictMap)
                })
            }
        },
        created() {
            this.mapDict()
            this.listUser()
            this.register()
        },
        computed: {
            activeSystem() {
                return this.$store.state.Pabu.activeSystem
            }
        },
        watch: {
            activeSystem(newVal, oldVal) {
                this.listUserMenuTreeBySystem(newVal)
            }
        },
    }
</script>

<style>
    .chat {
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
        float: left;
    }

    .chat-sidebar {
        width: 200px;
        height: 100%;
        background-color: #515a6e;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .chat-detailed {
        padding: 5px;
        width: calc(100% - 210px);
        height: calc(100% - 10px);
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* iview样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .chat-sidebar > .el-menu {
        border: none;
    }

    .chat-sidebar > .el-menu > li[class*="el-submenu is-active is-opened"] > div {
        background: #546580 !important;
    }

    .chat-sidebar > .el-menu > li[class*="el-menu-item is-active"],
    .chat-sidebar > .el-menu > li > ul > li[class*="el-menu-item is-active"] {
        border-left: #5cadff 5px solid;
        border-right: none;
        color: #fff;
        background: #6f83a2 !important;
    }

    .chat-sidebar > .el-menu > .el-menu-item {
        height: 50px;
        line-height: 50px;
    }

    /*子模版样式*/
    .chat-menu {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .chat-menu > .el-table {
        height: calc(100% - 35px) !important;
    }

    .chat-menu > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }

</style>
